<script setup>
import { resource } from "@device/assets/resource";
const props = defineProps({
  record: Object,
  active: Boolean,
  showCharge: {
    type: Boolean,
    default: true,
  },
});

const classNames = computed(() => {
  return {
    "resource-table-item": true,
    active: props.active,
  };
});

const typeColor = {
  device: "#1677FF",
  collector: "#52C41A", // 数采
  protocol: "#FAAD14", // 协议
};

const icon = {
  device: "icon-a-rongqi21",
  collector: "icon-rongqi3",
  protocol: "icon-a-rongqi11",
};

const imageMap = new Map([
  ["device", resource.deviceDefaultImage],
  ["collector", resource.collectorDefaultImage],
  ["protocol", resource.protocolDefaultImage],
]);
</script>

<template>
  <div :class="classNames">
    <div class="item-center">
      <div class="table-item-img">
        <img :src="record.photoUrl?.url || imageMap.get(record.type?.value)" />
      </div>
      <div class="item-center-bottom">
        <div class="table-item-title fz-16">
          <j-ellipsis>
            {{ record.name }}
          </j-ellipsis>
        </div>
        <div class="table-item-tag">
          <a-space>
            <AIcon
              :type="icon[record.type?.value]"
              :style="{ color: typeColor[record.type?.value] }"
            />
            <span class="fc-600">
              {{ record.type?.text || "-" }}
            </span>
          </a-space>
        </div>
        <div class="table-item-desc fz-12">
          <j-ellipsis :lineClamp="2">
            {{ record.describe }}
          </j-ellipsis>
        </div>
      </div>
    </div>

    <div
      v-if="showCharge"
      class="table-item-version item-position-absolute"
      :class="{ charge: record.charge }"
    >
      {{
        record.charge
          ? $t("ResourceTable.CardItem.777348-0")
          : $t("ResourceTable.CardItem.777348-1")
      }}
    </div>
  </div>
</template>

<style scoped lang="less">
.resource-table-item {
  position: relative;
  width: 100%;
  transition: all 0.2s;
  border-radius: 8px;
  cursor: pointer;
  height: 348px;
  //border: 2px solid transparent;
  color: @font-gray-900;
  background-color: #fff;
  border: 1px solid #eff0f1;
  .item-center {
    padding: 12px;
  }

  &.active {
    border-color: @primary-color;
  }

  .item-position-absolute {
    position: absolute;
  }

  .table-item-title {
    font-weight: bold;
  }

  .item-center-bottom {
    padding: 0 4px;
    margin-top: 16px;
  }

  .table-item-tag {
    border-radius: 4px;
    background-color: @font-gray-50;
    display: inline-block;
    padding: 4px 8px;
    margin: 8px 0;
  }

  .p-12 {
    padding: 0 12px;
  }

  .table-item-img {
    background-color: @font-gray-50;
    border-radius: 4px;
    overflow: hidden;

    > img {
      height: 194px;
      width: 100%;
    }
  }

  .table-item-version {
    top: 12px;
    left: 12px;
    border-radius: 4px;
    padding: 4px 12px;
    background-color: #ffeded;
    color: #ff4d4f;

    .charge {
      background-color: #fbebd1;
      color: #a6845f;
    }
  }
}
</style>
